import 'package:flutter/material.dart';
import '../theme/app_theme.dart';

class ProfileScreen extends StatefulWidget {
  final Function(bool)? onModeToggle;
  final bool? currentMode;
  const ProfileScreen({super.key, this.onModeToggle, this.currentMode});

  @override
  State<ProfileScreen> createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppTheme.background,
      body: SafeArea(
        child: SingleChildScrollView(
          physics: const AlwaysScrollableScrollPhysics(),
          child: Column(
            children: [
              
              Container(
                padding: const EdgeInsets.all(16),
                color: AppTheme.white,
                child: Row(
                  children: [
                    const CircleAvatar(
                      radius: 32,
                      backgroundColor: Color(0xFFFCE4EC),
                      child: Text(
                        '月',
                        style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.bold,
                          color: AppTheme.primaryColor,
                        ),
                      ),
                    ),
                    const SizedBox(width: 12),
                    const Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '月伴',
                          style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                          color: AppTheme.textPrimary,
                        ),
                        ),
                      ],
                    ),
                    const Spacer(),
                    IconButton(
                      icon: const Icon(Icons.settings),
                      onPressed: () {
                        
                        Navigator.pushNamed(context, '/settings');
                      },
                      color: AppTheme.textSecondary,
                    ),
                  ],
                ),
              ),
              
              
              Container(
                margin: const EdgeInsets.only(top: 8),
                padding: const EdgeInsets.only(top: 16, bottom: 8),
                color: AppTheme.white,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    GestureDetector(
                      onTap: () {
                        
                        if (widget.onModeToggle != null) {
                          widget.onModeToggle!(false);
                        }
                      },
                      child: const _ModeItemWidget(title: '经期模式', icon: Icons.calendar_today, isActive: true),
                    ),
                    GestureDetector(
                      onTap: () {
                        
                        Navigator.pushNamed(context, '/pregnancy_preparation_mode');
                      },
                      child: const _ModeItemWidget(title: '备孕模式', icon: Icons.medical_services, isActive: false),
                    ),
                    GestureDetector(
                      onTap: () {
                        
                        Navigator.pushNamed(context, '/pregnancy_mode');
                      },
                      child: const _ModeItemWidget(title: '怀孕模式', icon: Icons.pregnant_woman, isActive: false),
                    ),
                    GestureDetector(
                      onTap: () {
                        
                        Navigator.pushNamed(context, '/parenting_mode');
                      },
                      child: const _ModeItemWidget(title: '育儿模式', icon: Icons.child_care, isActive: false),
                    ),
                  ],
                ),
              ),
              
              
              Container(
                margin: const EdgeInsets.only(top: 8),
                padding: const EdgeInsets.all(16),
                color: AppTheme.white,
                child: ListTile(
                  leading: const Icon(Icons.water_drop, color: AppTheme.primaryColor),
                  title: const Text('经期设置', style: AppTheme.bodyStyle),
                  subtitle: const Text('周期28天，经期5天', style: AppTheme.smallStyle),
                  trailing: const Icon(Icons.chevron_right, color: AppTheme.textLight),
                  onTap: () {
                    Navigator.pushNamed(context, '/period_settings');
                  },
                ),
              ),
              
              const SizedBox(height: 8),
            ],
          ),
        ),
      ),
    );
  }

  
}

class _ModeItemWidget extends StatelessWidget {
  final String title;
  final IconData icon;
  final bool isActive;
  
  const _ModeItemWidget({required this.title, required this.icon, required this.isActive});
  
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: 56,
          height: 56,
          decoration: BoxDecoration(
            color: isActive ? const Color(0xFFFCE4EC) : AppTheme.lightGray,
            borderRadius: BorderRadius.circular(8),
          ),
          alignment: Alignment.center,
          child: Icon(
            icon,
            color: isActive ? AppTheme.primaryColor : AppTheme.textSecondary,
            size: 24,
          ),
        ),
        const SizedBox(height: 8),
        Text(
          title,
          style: const TextStyle(
            fontSize: 12,
            color: AppTheme.primaryColor,
          ),
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
        ),
      ],
    );
  }
}
